<template>
  <div>
    <el-table
      :data="classes_status"
      style="width: 100%"
      :default-sort = "{prop: 'date', order: 'descending'}"
      >
      <el-table-column
        prop="class"
        label="班级"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="status"
        label="签到状态"
        sortable
        width="100">
      </el-table-column>
    </el-table>
    <div style="width:450px;height:400px">
      <div id="barChartOrder" style="width:100%;height:400px;"></div>
    </div>
    <div class="status-table">
      <table class="table table-hover table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>学号</th>
            <th>姓名</th>
            <th>签到</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(student, index) in students" :key="student.id" v-show="now_status===student.status">
            <td class="num">{{index+1}}</td>
            <td class="id">{{student.id}}</td>
            <td class="name">{{student.name}}</td>
            <td class="status">
              {{student.status}}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import * as _ from 'lodash'
import moment from 'moment'
const qs = require("qs");
export default {
  name:"studentStatus",
  props: {
    uid: ''
  },
  data(){
    return {
      students: [], //查看全部学生的状态
      status_count: {
        '在校': 0,
        '请假回家': 0,
        '外出实习': 0,
        '不在校': 0,
        '未签到': 0
      }, //统计不同在校情况的人数
      now_status: "在校",
      classes_status: [],
      barChartOrder: null,
      //图表配置数据
      option: {
        title: {
          text: "学生在校情况统计"
        },
        tooltip: {},
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        legend: {
          data: ["横轴状态，纵轴数量"]
        },
        xAxis: {
          data: [] 
        },
        yAxis: {},
        series: [
          {
            itemStyle : { normal: {label : {show: true,position:'top'}}},
            name: "Sales",
            type: "bar",
            data: [] //5,20,25,10,15
          }
        ]
      }
    }
  },
  created(){
    this.getAllStudentsAndFormat()
    this.getClassRecord()
  },
  mounted() {
    this.drawBarChart()
  },
  methods:{
    drawBarChart() {
      this.barChartOrder = echarts.init(
        document.getElementById("barChartOrder")
      );
      this.barChartOrder.setOption(this.option)
    },
    getAllStudentsAndFormat() {
      this.axios({
        method: "post",
        url: "/get_info",
        data: qs.stringify({id: this.uid,date:moment().format('YYYY-MM-DD')}),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }).then(({ data }) => {
        if (data.status) {
          this.students = data.data.students;
          _.forEach(this.students, (item)=>{
            
            item.status = item.signinrecords.length? item.status:'未签到'
            if (this.status_count.hasOwnProperty(item.status)) {
              this.status_count[item.status]++;
            } else {
              this.status_count[item.status] = 1;
            }
          })
          for (let key in this.status_count) {
            this.option.xAxis.data.push(key);
            this.option.series[0].data.push(this.status_count[key]);
          }
          this.barChartOrder.setOption(this.option);
          this.barChartOrder.on("click", params => {
            this.now_status = params.name;
          });
        }
      });
    },
    getClassRecord() {
      const date = moment().format('YYYY-MM-DD')
      this.axios.get(`/getClassRecords?id=${this.uid}&date=${date}`).then(({data})=>{
        if(data.status) {
          _.forEach(data.data.classes, (item)=>{
            const status = item.classrecords.length? '已签到':'未签到'
            this.classes_status.push({class: item.name, status})
          })
        }
      })
    }
  }
}
</script>

<style lang="less">

</style>
